<template>
  <div class="form-datetime">
    <!-- <bbx-timezone-time-picker
      :value="bindTime"
      :is-edit="true"
      :type="type"
      :format="format"
      value-format="timestamp"
      @confirm="choose"
    >
      <template picker>
        <el-date-picker
          :id="`form_${field.fieldName}`"
          :type="type"
          :prefix-icon="`iconfont icon-fdn-${type}`"
          :picker-options="pickerOptions"
          :format="format"
          value-format="timestamp"
          :placeholder="placeholder"
          :value="bindTime"
          :clearable="clearable"
          :default-time="defaultTime"
          :default-value="timeDefaultValue"
          :disabled="disabled"
          @change="choose($event, true)"
          @input="choose"
          popper-class="bbx-plan-time-picker"
        />
      </template>
    </bbx-timezone-time-picker> -->
    <form-date 
      v-bind="$props"
      :field="currentField"
      :default-time="defaultTime"
      :disabled-date="pickerOptions.disabledDate"
      popper-class="bbx-plan-time-picker"
      only-native-event
      @nativeConfirm="choose"
      @nativeChange="choose($event, true)" 
      @nativeInput="choose" />
  </div>
</template>

<script>
import { defineComponent,getCurrentInstance, ref, unref, computed, watchEffect, watch } from 'vue';
/* utils */
import FormMixin from '@src/component/form/mixin/form';
import { getTimestamp, formatDate } from 'pub-bbx-utils';
import { findComponentUpward, findComponentsUpward } from '@src/util/assist';
import { cloneDeep } from 'lodash';
import { safeNewDate } from '@src/util/time';

export default defineComponent({
  name: 'FormPlanendtime',
  mixins: [FormMixin],
  props: {
    pickerOptions: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: [String, Number],
      default: null
    },
    clearable: {
      type: Boolean,
      default: true
    },
    startTime: {
      type: [String, Number],
      default: ''
    },
  },
  emits: ['input', 'update', 'planTimeChange'],
  setup(props,  { emit }){
    const instance = getCurrentInstance();
    const currentField = ref(cloneDeep(props.field))
    const type = computed(() => props.field?.setting?.dateType === 'date' ? 'date' : 'datetime')
    const isDateTime = computed(() => type.value === 'datetime')
    const format = computed(() => unref(isDateTime) ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd')
    const timeDefaultValue = ref(null)
    const defaultTime = ref('23:59:59')
    const bindTime = ref(null)
    const startTimeDate = computed(() => {
      const formData = findComponentUpward(instance?.proxy, 'form-builder')
      return formData?.value?.planStartTime || props.startTime || ''
    })
    const isDateHour = computed(() => Boolean(props.field?.setting?.isDateHour))
    
    watchEffect(() => {
      bindTime.value = props.value ? getTimestamp(props.value) : null
    })
    

    function choose(newValue, isChange = false) {
      
      const {value: oldValue, field} = props
      const upData = {
        newValue,
        oldValue,
        field
      }
      
      if (isChange) {
        emit('planTimeChange', upData);
      } else {
        emit('update', upData);
        emit('input', newValue);
      }
    }
    watch(()=> startTimeDate.value, (val) => {
      if (val && !props.value) {
        let maxNum = isDateTime.value ? 24 * 60 * 60 * 1000 : (24 * 60 * 60 * 1000)
        timeDefaultValue.value = val + maxNum 
        defaultTime.value = formatDate( val + maxNum, 'HH:mm:ss')
      }else {
        timeDefaultValue.value = null
        defaultTime.value = '23:59:59'
      }
    })

    if(isDateTime.value) {

      currentField.value.setting.dateType = 'yyyy-MM-dd HH:mm'
    }

    return {
      currentField,
      type,
      isDateTime,
      format,
      defaultTime,
      bindTime,
      choose,
      timeDefaultValue,
      focus,
      startTimeDate,
    }
  },
})
</script>

<style lang="scss">
.form-datetime {
  width: 100%;

  .el-input__inner {
    cursor: pointer;
  }

  .el-date-editor {
    width: 100%;
  }
}

.body-for-planendtime {
  .el-date-picker {
    .el-picker-panel__footer {
      button:nth-child(1) {
        display: none;
      }
    }

    .el-time-spinner {
      .el-time-spinner__wrapper {
        width: 50%;

        &:last-child {
          display: none;
        }
      }
    }
  }
}
</style>
